<template>
    <div>
        <div class="clearfix equiplist-type">
            <div class="clearfix types-ms">
                <el-radio-group v-model="patternRadio" @change="patternradioChangeHandle">
                    <el-radio size="medium" :label="0">常规模式</el-radio>
                    <el-radio size="medium" :label="1">编辑突围模式</el-radio>
                </el-radio-group>
                <el-input placeholder="请输入你想要搜索的道具名" v-model="searchContent" clearable>

                </el-input>
            </div>

            <div class="clearfix types-ms">
                <el-radio-group v-model="radio" @change="radioChangeHandle">
                    <el-radio size="medium" :label="0">全部</el-radio>
                    <el-radio size="medium" :label="1">攻击</el-radio>
                    <el-radio size="medium" :label="2">法术</el-radio>
                    <el-radio size="medium" :label="3">防御</el-radio>
                    <el-radio size="medium" :label="4">移动</el-radio>
                    <el-radio size="medium" :label="5">打野</el-radio>
                    <el-radio size="medium" :label="7">游走</el-radio>
                </el-radio-group>
            </div>
        </div>
        <div class="equiplist-content">
            <ul class="equiplist clearfix">
                <li v-for="equip in filterTableData" v-bind:key="equip.item_id" @mouseenter="enter(equip)"
                    @mouseleave="leave" @mousemove="updatePosition">
                    <a href="#">
                        <img :src="'https://game.gtimg.cn/images/yxzj/img201606/itemimg/' +
                        equip.item_id +
                        '.jpg  '" />
                        {{ equip.item_name }}
                    </a>
                </li>
            </ul>
            <div v-show="seen" class="float-window" :style="positionStyle" ref="element">
                <div class="main-content">
                    <img style="border:none" v-if="equipItem.item_id != undefined" :src="'https://game.gtimg.cn/images/yxzj/img201606/itemimg/' +
                        equipItem.item_id +
                        '.jpg  '" />
                    <div style="margin-left: 20px;">
                        <h3>{{ equipItem.item_name }}</h3>
                        <p style="margin-top: 10px;">售价：{{ equipItem.price }}</p>
                        <p style="margin-top: 10px;">总价：{{ equipItem.total_price }}</p>
                    </div>
                </div>
                <div class="desc">
                    <!-- v-html  解析带有标签的数据 -->
                    <p v-html="equipItem.des1"></p>
                    <p v-html="equipItem.des2" style="margin-top: 10px;"></p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            equiplist: "",
            equipTypeList: "",
            radio: 0,
            searchContent: "",
            patternRadio: 0,
            seen: false,
            positionStyle: { top: '0px', left: '0px' },
            equipItem: {}

        }
    },
    created() {
        this.query();
    },
    computed: {
        //过滤数据 实现分页和搜索效果
        filterTableData: function () {
            let input = this.searchContent && this.searchContent.toLowerCase();
            let searchItems;
            //搜索 且有结果就返回一个结果数组
            if (input) {
                searchItems = this.equiplist.filter(function (item) {
                    return Object.keys(item).some(function () {
                        return String(item['item_name'])
                            .toLowerCase()
                            .match(input);
                    });
                });
            } else {
                //不搜索 则返回tableTypeData,即对应类型的英雄列表
                searchItems = this.equipTypeList;
            }
            return searchItems;
        }
    },
    methods: {
        query() {
            this.axios.get('http://47.241.102.141:3000/items')
                .then(response => {
                    // console.log(response.data);
                    this.equiplist = response.data;
                    this.equipTypeList = this.equiplist;
                })
                .catch(error => {
                    console.log(error);
                });
        },
        commonContent(radioNum) {
            if (radioNum === 0) {
                this.equipTypeList = this.equiplist;
            } else {
                this.equipTypeList = [];
                for (let i = 0; i < this.equiplist.length; i++) {
                    if (this.equiplist[i].item_type == radioNum) {
                        this.equipTypeList.push(this.equiplist[i]);
                    }
                }
            }
        },
        //如果单选框发生改变 就显示相应类型的英雄
        radioChangeHandle() {
            switch (this.radio) {
                case 0:
                    this.commonContent(0);
                    break;
                case 1:
                    this.commonContent(1);
                    break;
                case 2:
                    this.commonContent(2);
                    break;
                case 3:
                    this.commonContent(3);
                    break;
                case 4:
                    this.commonContent(4);
                    break;
                case 5:
                    this.commonContent(5);
                    break;
                case 7:
                    this.commonContent(7);
                    break;
            }
        },
        patternradioChangeHandle() {
            if (this.patternRadio == 1) {
                this.$router.push('/hint');
            }
        },
        //鼠标移入事件
        enter(item) {
            this.seen = true;
            this.equipItem = item;
        },
        //鼠标移出事件
        leave() {
            this.seen = false;
        },
        //鼠标位置更新事件
        updatePosition(event) {
            // var height = this.$refs.element.offsetHeight;
            // var width = this.$refs.element.offsetWidth;
            let x,y;
            if(event.pageX > 1000) {
                x = event.pageX - 460 + 'px'; 
                y = event.pageY -760 + 'px';
            }else if(event.pageY > 2420) {
                x = event.pageX - 100 + 'px'; 
                y = event.pageY -1160 + 'px';
            } 
            else {
                x = event.pageX - 100 + 'px'; 
                y = event.pageY -760 + 'px';
            }
                // x = event.pageX - 100 + 'px'; 
                // y = event.pageY -1200 + 'px';
            this.positionStyle = {top:y,left:x};
            // console.log("x=" + x,",y=" + y);
            // console.log( "悬浮X：" + event.pageX + "，悬浮Y：" + event.pageY);
        }
    },
}
</script>

<style>
body>.el-container {
    margin-bottom: 40px;
    height: 100%;
}

.equiplist-type {
    width: 100%;
    height: 106px;
    margin-top: 40px;
    background-color: #EFEFEF;
    border-radius: 5px;
    color: #686869;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: '\20';
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
}


.types-left {
    float: left;
    width: 80px;
    height: 106px;
    text-align: center;
    background-color: #2C88E2;
    color: #fff;
    border-radius: 5px 0 0 5px;
}

.types-left li {
    display: block;
    height: 52px;
    line-height: 52px;
    font-size: 16px;
}

.types-ms {
    display: block;
    position: relative;
    float: left;
    width: 1000px;
    padding: 16px 0;
    height: 20px;
    line-height: 21px;
}

.el-radio {
    float: left;
    padding-left: 10px;
    min-width: 80px;
    font-size: 14px;
    cursor: pointer;
}

.el-input {
    position: absolute;
    right: -130px;
    top: 10px;
    width: 220px;
    padding-left: 30px;
}

/*英雄列表模块*/
.equiplist-content {
    margin-top: 40px;
}

.equiplist-content ul {
    margin-right: -50px;
    overflow: hidden;
}

.equiplist-content li {
    float: left;
    width: 87px;
    margin-bottom: 34px;
    margin-right: 30px;
}


.equiplist-content a {
    display: block;
    width: 100%;
    text-align: center;
    color: #363636;
}

.equiplist-content img {
    display: block;
    width: 83px;
    height: 83px;
    border: 2px solid #258DF2;
    border-radius: 10px 0 10px 0;
}

.float-window {
    position: absolute;
    width: 220px;
    padding: 30px 40px 50px 40px;
    border: 1px solid #258DF2;
    background: rgba(0, 0, 0, 0.8);
}
.float-window .main-content {
    display: flex;
}

.float-window h3 {
    color: rgb(30, 224, 41);
}

.float-window p {
    color: rgb(171, 127, 49);
}

.float-window .desc {
    margin-top: 10px;
}

.desc p {
    color: rgb(73, 168, 249);
}
</style>